<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <label style="margin: 20px;color: coral;">部门名称不能与其他账号重复，否则会引发500错误！！！</label> 
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="ruleForm.deptName" placeholder="请输入部门名称"></el-input>
            </el-form-item>

            <el-form-item label="部门描述" prop="remark">
                <el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入..."></el-input>
            </el-form-item>
            <el-form-item>
                <el-button plain type="primary" @click="submitForm('ruleForm')">新增部门</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Add",
    data() {
        return {
            Department: [],
            ruleForm: {
                deptName: null,
                remark: null,
                type:1
            },
            rules: {
                deptName: [{required: true,message: "请输入部门名称",trigger: "blur"}],
                remark: [{required: true,message: "请描述部门",trigger: "blur"}]
            }
        };
    },
    model: {
        prop: "dialogFormVisible",
        event: "change",
    },
    props: {
        dialogFormVisible: Boolean,
    },
    methods: {
        //提交表单
        submitForm(formName) {
            console.log(this.ruleForm);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.axios({
                        method: "POST",
                        url: "Department",
                        data: JSON.stringify(this.ruleForm),
                        headers: {
                            Authorization: sessionStorage.getItem("token"),
                            "Content-Type": "application/json",
                        },
                    })
                        .then((res) => {
                            if (res.data.code>0) {
                                this.$notify({
                                    title: "成功",
                                    message: res.data.msg,
                                    type: "success",
                                });
                                // 触发刷新
                                this.$emit("refresh");
                                this.$emit("change", false);

                            } else {
                                this.$notify.error({
                                    title: "错误",
                                    message: res.data.msg,
                                });

                                this.$notify.error({
                                    title: "错误",
                                    message: res.data.msg,
                                });

                            }
                        })
                        .catch((err) => {
                            console.log("err: ", err);
                            this.$notify.error({
                                title: "错误",
                                message: err.message,
                            });
                        });

                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>